<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .wrap{
           width: 500px; 
           /* 不设置高度的时候，当前元素高度会随着自身文本高度去变化 - 撑开 */
           border: 1px solid #000;
           margin-top: 200px;
           /* height: 400px; */
           overflow: hidden;
        }
        .box1,.box2,.box3{
            width: 100px;
            height: 100px;
            float: left;
            /* margin-top: -50px */
        }
        .box1{
            background: red
        }
        .box2{
            background: green
        }
        .box3{
            background: blue
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div> 
        <br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1
    </div>
</body>
</html>
<!-- 
    高度塌陷/高度坍塌:父级元素没有高度,子级元素含有浮动
        原因:给子级元素添加浮动后，浮动元素脱离文档流不占位置
        解决高度塌陷:4种(简单-复杂)
            第一种:给父级添加高度
                - 优点：简单，好理解
                - 缺点:不能被撑开，无法做到自适应高度
            
            第二种:给父级添加overflow:hidden
                原因: 使用了overflow:hidden 触发了BFC(块级格式化上下文)
                BFC: 规则 - 使用overflow就能触发计算属性(浮动元素也参与高度计算)
                优点:能自适应，解决方法简单
                缺点：当前子级缘故有超出父级区域就会被隐藏,对网页布局造成影响
 -->